import React, { useState, useRef } from 'react'

import "./App.css"

export default function App() {
  const oneRef = useRef()
  const twoRef = useRef()
  const threeRef = useRef()
  // unFoldRef为null时,表示所有菜单都处于折叠状态,也是初始化的状态
  const [unFoldRef, setUnFoldRef] = useState(null)

  const unFold = (ref)=>{
    return ()=>{
      if(unFoldRef===null){
        setUnFoldRef(ref)
        ref.current.style.display = "block"
      }else if(ref!==unFoldRef){
        ref.current.style.display = "block"
        unFoldRef.current.style.display = "none"
        setUnFoldRef(ref)
      }else{
        setUnFoldRef(null)
        ref.current.style.display = "none"
      }
    }
  }

  return (
    <nav>
    <ul>
      <li>
        <a href="#" onClick={unFold(oneRef)}>101</a>
        <ul ref={oneRef}>
          <li><a href="#">1011</a></li>
          <li><a href="#">1012</a></li>
          <li><a href="#">1013</a></li>
        </ul>
      </li>
      <li>
        <a href="#" onClick={unFold(twoRef)}>102</a>
        <ul ref={twoRef}>
          <li><a href="#">1021</a></li>
          <li><a href="#">1022</a></li>
          <li><a href="#">1023</a></li>
        </ul>
      </li>
      <li>
        <a href="#" onClick={unFold(threeRef)}>103</a>
        <ul ref={threeRef}>
          <li><a href="#">1031</a></li>
          <li><a href="#">1032</a></li>
          <li><a href="#">1033</a></li>
        </ul>
      </li>
    </ul>
  </nav> 
  )
}
